<template>
    <div class="bigdiv">
      <div class="head">
        <el-text class="mx-1" style="text-align: center;" size="large">待办列表</el-text>
        <!-- <TodoEnter :todos="todos" @add-todo="addTodo" /> -->
        <!-- <input 
          type="text" 
          class="shuru" 
          placeholder="输入待办项目后点击回车"
          v-model="newTodo"
          @keyup.enter="addTodo"
          ref="shuru"
        > -->
        <el-input
        v-model="newTodo"
        placeholder="输入待办项目后点击回车"
        @keyup.enter="addTodo"
        ref="shuru"
        size="large"
        style="width: 300px;
        position: absolute;
        left: 100px;
        right: 100px;
        top: 40px;"
        >
        </el-input>
          </div>
            <el-scrollbar height="700px">
                <div class="foot">
                  <ul id="qingdan">
                    <li id="nnn" v-for="(todo, index) in todos" :key="index" style="margin: auto; margin-top: 10px;">
                      <el-checkbox v-model="todo.checked" :label="todo.text" size="large" style="margin-left: 5px;"/>

                      <el-button type="danger" :icon="Delete" circle 
                      style="right: 10px;
                      top: 5px;
                      position: absolute;"
                      @click="removeTodo(index)" />
                    </li>
                  </ul>
                </div>
            </el-scrollbar>     
    </div>
    

    <div class="cangku">
      <a href="https://gitee.com/chen-zanji/implementing-todolisy-with-vue.git"  class="biaoqian">代码仓库</a>

    </div>

  </template>
  
  <script setup>
  import { ref } from 'vue';
  import {Checked, Delete} from '@element-plus/icons-vue'

  const todos = ref([]);
  const newTodo = ref('');

  const removeTodo = (index) => {
    todos.value.splice(index, 1);
  };

const addTodo = () => {
    if (newTodo.value.trim() === '') {
      alert('你必须输入内容');
      newTodo.value = '';
      return;
    }
      // emit('add-todo', { text: newTodo.value });
      todos.value.push({ text: newTodo.value , checked: false});
      newTodo.value = '';
      const inputElement = document.querySelector('.shuru');
      if (inputElement) {
        inputElement.focus(); // 重新聚焦输入框
      }
    
  };
  </script>
  
  <style>
  * {
    list-style-type: none;
  }
  .bigdiv {
    height: 800px;
    width: 500px;
    margin: 0 auto;
    border-radius: 15px;
    -moz-box-shadow: 0px 0px 10px #333333;
    -webkit-box-shadow: 0px 0px 10px #333333;
    box-shadow: 0px 0px 10px #333333;
    position: relative;
  }
  .head {
    border-bottom: 1px gray solid;
    background-color: aquamarine;
    height: 120px;
    text-align: center;
  }
  /* .shuru {
    height: 50px;
    width: 300px;
    border: 1px gray solid;
    border-radius: 10px;
    position: absolute;
    left: 100px;
    right: 100px;
    top: 50px;
  } */
  h2 {
    text-align: center;
  }
  .foot {
    height: 680px;
    width: 100%;
    overflow-y: auto;

  }
  #nnn {
    width: 420px;
    height: auto;
    border: 1px black solid;
    display: block;
    margin-top: 10px;
    border-radius: 10px;
    position: relative;
    transition: .3s;
  }
  #nnn:hover {
    -moz-box-shadow: 0px 0px 5px #FF0000;
    -webkit-box-shadow: 0px 0px 5px #FF0000;
    box-shadow: 0px 0px 5px #FF0000;
  }
  /* input {
    position: absolute;
    left: -30px;
    top: 10px;
  } */
  span {
    line-height: 35px;
  }
  /* input:hover {
    -moz-box-shadow: 0px 0px 5px #FF0000;
    -webkit-box-shadow: 0px 0px 5px #FF0000;
    box-shadow: 0px 0px 5px #FF0000;
  } */
.cangku{
    height: 100px;
    width: 100px;
    margin: 0 auto;

}
.biaoqian{
  text-align: center;
  font-size: 150%;
  position: relative;
}
  </style>